<template>
    <a :class="[getClass]" @click.prevent="click" :title="config.text">
        <i v-if="config.useIcon" :class="[getImgClass]"></i>
        <span v-else class="bgImg" :class="[getImgClass]"></span>
        <span v-if="config.showText" :class="[getTextClass]" v-text="config.text"></span>
    </a>
</template>

<script>
    import {mapState, mapGetters, mapMutations} from 'vuex'
    import {Observer} from '../../core/util'
    import {MessageBox, Message} from 'element-ui'
    // 图标组件
    export default {
        props: ['config'],
        data: function () {
            return {
                disable: false,
                active: false,
            };
        },
        mounted: function () {
            var self = this;
            if (self.config.query) {
                Observer.register('selectionchange', function (editor) {
                    if (self.config.query.toLowerCase() === 'state') {
                        var state = editor.queryCommandState(self.config.cmd);
                        self.disable = state === -1;
                        self.active = state === 1 || state === true;
                    } else if (self.config.query.toLowerCase() === 'value') {
                        self.active = editor.queryCommandValue(self.config.cmd) === self.config.value;
                    }
                });
            } else if (self.config.isDialog && UE.ui[self.config.cmd]) {
                Observer.register('editorCompleted', function (editor) {
                    new UE.ui[self.config.cmd](editor);
                });
            } else if (self.config.copyEvent) {
                var client = new ZeroClipboard();
                client.clip(self.$el);
                client.on("copy", function (e) {
                    if (!window.editorId) return Message({
                        message: $.i18n('messager_need_to_focus'),
                        type: 'warning'
                    });
                    var client = e.client,
                        rng = UE.getEditor(window.editorId).selection.getRange(),
                        div = document.createElement('div');

                    div.appendChild(rng.cloneContents());
                    client.setText(div.innerText || div.textContent);
                    client.setHtml(div.innerHTML);
                    rng.select();
                    self.config.copyEvent();
                });
                Observer.register('selectionchange', function (editor) {
                    var range = editor.selection.getRange();
                    self.disable = !!range.collapsed;
                });
                client.on('mouseover mouseout', function (e) {
                    var target = $(e.target);
                    if (e.type == 'mouseover') {
                        target.addClass('edui-state-hover');
                    } else if (e.type == 'mouseout') {
                        target.removeClass('edui-state-hover');
                    }
                });
            }
            if (this.config.customCreated) this.config.customCreated.call(this);
        },
        computed: {
            getClass: function () {
                var classList = [];
                if (this.disable) {
                    classList.push('disable');
                } else if (!this.config.disableHover) {
                    classList.push('hover');
                }
                if (this.active) {
                    classList.push('active');
                }
                return classList.concat((this.config.classList || []));
            },
            getImgClass: function () {
                return (this.config.imgClass || []);
            },
            getTextClass: function () {
                return (this.config.textClass || []);
            }
        },
        methods: {
            click: function () {
                if (this.disable) return;
                if (this.config.customFn) {
                    this.config.customFn.call(this);
                    return;
                }
                if (!window.editorId) return Message({
                    message: $.i18n('messager_need_to_focus'),
                    type: 'warning'
                });
                if (this.config.isDialog) {
                    // 要打开新弹窗执行命令
                    var dialogName = this.config.cmd + 'Dialog';
                    UE.getEditor(window.editorId).ui._dialogs[dialogName].open();
                } else if (this.config.cmd) {
                    // 不用打开新弹窗执行命令
                    Observer.fire('execCommand', [this.config.cmd].concat(this.config.param || []), this.notFous);
                }
            }
        }
    }
</script>
